.initialization {
    // local varibles
    $primary-font-color: #808080;
    $primary-background-color: #DEDEDE;

    background: $primary-background-color;
    color: $primary-font-color;
    position: relative;

    .brand-image {
        height: 52px;
        left: 15px;
        position: absolute;
        top: 15px;
        width: 52px;
    }

    .headline {
        font-size: 24px;
        font-weight: 200;
    }

    select {
        background: url('../img/arrow-down.png') #fff no-repeat;
        background-position: calc(100% - 5px) center;
        background-size: 16px 10px;
        border: none;
        border-radius: 0;
        height: 36px;
        padding: 0 0 0 10px;
        width: 250px;
        -webkit-appearance: none;
        appearance: none;
    }

    .home {
        .language {
            margin: 0 0 8px 0;
        }
    }



    .usb-disabled {
        opacity: 0.6 !important;
        cursor: normal !important;
    }

    .connect-machine {
        .scene {
            height: 209px;
            margin: 0 0 10px 0;
            width: 209px;
        }

        .select-printer {
            bottom: 0;
            right: 0;
            box-shadow: 0 4px 15px rgba(0,0,0,.3), 0 16px 40px rgba(0,0,0,.5);

            .arrow {
                display: none;
            }
        }

        .connecting-means {
            @include absolute-center();
            height: 556px;
            width: 755px;
        }

        .btn-h-group {
            margin: 0 auto 75px auto;
        }

        .btn-action,
        .btn-action:hover {
            background: transparent;
            height: 458px;
            max-width: initial;
            opacity: 1;
            transition: box-shadow .3s ease;
            width: 335px;

            .headline,
            .subtitle {
                color: #666;
                font-size: 24px;
                line-height: 30px;
                margin: 0;
                text-align: center;
            }

            .subtitle {
                margin: 0 0 30px 0;
            }
        }

        .btn-action:hover {
            box-shadow: 0 0 10px rgba(0, 0, 0, .3);
        }

        .btn-action:first-child {
            margin: 0 85px 0 0;
        }

        .select-machine-type {
            .main-title {
                margin-bottom: 50px;
            }
            .btn-action,
            .btn-action:hover {
                background: #333;
                height: 176px;
                width: 300px;
                transition: all .3s ease;                                
    
                .headline,
                .subtitle {
                    transition: all .3s ease;                
                    color: white;
                }
    
                .subtitle {
                    margin: 0 0 10px 0;
                }
            }
    
            .btn-action:hover {
                box-shadow: 0 0 10px rgba(0, 0, 0, .3);
                background-color: #ddd;
                .headline,
                .subtitle {
                    color: #333;
                }
            }
        }
    }

    .connect-beambox {
        .main-title {
            margin-bottom: 50px;
        }
        .tutorial {
            white-space: pre;
            border: 2px solid #333;
            background-color: #FAFAFA;
            padding: 20px;
            line-height: 2em;
            text-align: left;
            margin: 20px 0;
        }
        .tutorial-video {
            a {
                font-size: 20px;
                &:hover {
                    color: #666;
                    cursor: pointer;
                }
            }
        }
    }

    .select-wifi {
        .notice {
            margin: 0 0 34px 0;

            P {
                line-height: 2rem;
                margin: 0;
            }
        }

        .modal-body {
            box-shadow: 0 7px 15px rgba(0, 0, 0, .2), 0 10px 20px rgba(0, 0, 0, 0.1);
        }

        .form-ap-mode {
            padding: 25px 25px 0 25px;

            h2 {
                margin: 0 0 10px 0;
            }

            .h-control {
                @include flexbox();
                align-items: center;
                margin: 0 0 10px 0;
            }

            .error {
                border: 2px solid #c00;

                &:focus {
                    outline: none;
                }
            }

            .header {
                font-size: 14px;
                line-height: 16.8px;
                flex: 1.5;
                margin: 0 10px 0 0;
                text-align: right;
            }

            input {
                border: 2px solid #E0E0DF;
                flex: 2;
                height: 36px;
                padding: 0 0 0 5px;
            }
        }

        .form-wifi-password {
            width: 300px;
        }

        .form-ap-mode {
            width: 400px;

            input {
                flex: 3;
                border: 2px solid #E0E0DF;
            }
        }

        .form-wifi-password,
        .form-ap-mode {
            background: $primary-background-color;
            overflow: scroll;

            .notice {
                color: #989898;
                font-size: 14px;
                line-height: 16.8px;
                margin: 20px 0;
            }

            .password-input {
                height: 36px;
                margin: 0 0 10px 0;
                padding: 0 0 0 5px;
                width: 250px;
            }
        }

        .wifi-list {
            height: 175px;
            overflow: scroll;
            position: relative;
            width: 250px;

            &.active{
                background: #F9F9F9;
            }

            .spinner-roller {
                height: 5em;
                position: absolute;
                width: 5em;
            }

            .row-fluid {
                @include flexbox();
                cursor: pointer;
                height: 100%;
                margin: 0;
                padding: 0 10px;
                flex: 2;
                justify-content: space-between;
            }

            .wifi-ssid {
                text-overflow: ellipsis;
                width: calc(100% - 50px);
            }

            li{
                text-align: left;
                &:hover{
                    background: #BBB;
                    color: #F8F8F8;
                }
            }

            span {
                display: block;
                line-height: 40px;
                padding-left: 10px;
            }

            input[type="radio"] {
                display: none;

                &:checked + .row-fluid {
                    background: #B2B2B2;
                    color: white;
                }
            }

            .fa {
                font-size: 1.2405951937882669rem;
            }
        }

        .btn-set-station-mode {
            line-height: 25px;
        }

        .btn-set-client-mode {
            line-height: 40px;
        }
    }

    .connecting-wifi {
        position: relative;

        .spinner-roller {
            height: 52px;
            margin: 0 auto 20px auto;
            width: 52px;
        }
    }

    .setting-completed {
        .headline {
            margin: 0 0 12px 0;
        }

        .notice {
            font-size: 14px;
            line-height: 20px;
            margin: 0 0 20px 0;
            padding: 20px;
            width: 451px;
        }
    }

    .h-form {
        width: 416px;

        .control {
            @include flexbox();
            margin: 0 0 10px 0;
            justify-content: space-around;
            align-items: center;
            flex-wrap: wrap;

            .error {
                border: 2px solid #c00;
            }

            input {
                height: 36px;
                width: 250px;
                flex: 3;
            }

            label,
            .input-head {
                font-weight: 200;
                flex: 1;
                margin: 0 10px 0 0;
                text-align: right;

                &.padleft{
                    flex:2;
                    margin-left: -106px;
                }
            }

            .error-message {
                color: #c00;
                font-size: 12px;
                line-height: 20px;
                padding: 0 0 0 104px;
                text-align: left;
                width: 100%;
            }
        }

        .controls{
            overflow: visible;
            margin-bottom: 10px;
            margin-left: -35px;
        }
    }

    .device-not-found {
        .not-found-img {
            width: 60%;
            margin-bottom: 50px;
        }
    }

    .notice-from-device {
        .headline {
            color: #666;
            font-size: 24px;
            line-height: 1.2em;
        }

        .subtitle {
            color: #808080;
            font-size: 15px;
            font-weight: normal;
            margin: 0 0 55px 0;
        }

        .signal-description {
            text-align: left;
        }

        .signal-position {
            height: 207px;
            margin: 0 30px 0 0;
            width: 207px;
        }

        .green-light {
            background: #4d4d4d;
            border-radius: 50%;
            height: 35px;
            overflow: hidden;
            position: relative;
            transform: translateY(50%);
            width: 35px;

            &::before,
            &::after {
                content: "";
                border-radius: 50%;
                display: block;
                height: 100%;
                left: 0;
                position: absolute;
                top: 0;
                width: 100%;
            }

            &::after {
                border: 4px solid #4d4d4d;
            }

            &::before {
                background: #99e046;
            }
        }

        .breathing {
            &::before {
                -webkit-animation: breath 4s infinite ease;
                animation: breath 4s infinite ease;
            }
        }

        .green-light-desc {
            margin: 0 0 25px 0;
            padding: 0 0 0 36px;
            font-size: 24px;
            font-weight: normal;

            p {
                font-size: 15px;
                font-weight: normal;
            }
        }
    }
}